<template>
  <el-icon @click="click" class="pointer mr20" size="20">
    <FullScreen />
  </el-icon>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue'
import screenfull from 'screenfull'
import { ElMessage } from 'element-plus'

const isFullscreen = ref(false)

const init = () => {
  if (screenfull.enabled) {
    screenfull.on('change', change)
  }
}
const destroy = () => {
  if (screenfull.enabled) {
    screenfull.off('change', change)
  }
}
const click = () => {
  if (!screenfull.enabled) {
    ElMessage.warning('你的浏览器不支持全屏')
    return false
  }
  screenfull.toggle()
}
const change = () => {
  isFullscreen.value = screenfull.isFullscreen
}

onMounted(() => {
  init()
})
onBeforeUnmount(() => {
  destroy()
})

</script>

<style lang="scss" scoped></style>
